<template>
	<view class="bottom-payment-wrapper">
		<view class="bottom-payment-content flex-c-s">
			<view class="payment-money-info">
				<view class="fz26">
					<text class="color999">共1件，</text><text class="fz26">合计:</text><text class="color-theme" style="font-size: 36rpx; font-weight: 800;">¥ {{total}}</text>
				</view>
				<view class="preferential-info fz24">
					<text class="color999">优惠共减:¥ {{ preferential }}</text> <text>优惠明细</text>
				</view>
			</view>
			<view class="payment-btn">
				<button class="bottom-pay-btn public-large-btn" @click="paymentHandle">立即付款</button>
			</view>
		</view>
		
		<!-- <CustomeModal ref="customeModalNode" @confirmModal="confirmModal" /> -->
	</view>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
// import {  paymentHadle } from '@/http/shop'
// import CustomeModal from '@/components/CustomeModal.vue'

export default defineComponent({
	// components: { CustomeModal },
	props: {
		count:  {
			type: Number,
			default: 1
		},
		total: {
			type: Number,
			default: 0
		},
		preferential: {
			type: Number,
			default: 0
		},
		orderId: {
			type: Number,
			default: 0
		},
		payCode: {
			type: String,
			default: ''
		},
		provider: {
			type: String,
			default: ''
		},
		payType: {
			type: Number,
			default: 0
		},
	},
	setup(props, ctx) {
		//props.success()
		
		const paymentHandle = async () => {
			ctx.emit('openPayment')
			
		}
		
		return {
			paymentHandle
		}
	}
})
</script>

<style lang="scss">
.bottom-payment-wrapper{
	position: fixed;
	height: 120rpx;
	background-color: #fff;
	left: 0;
	bottom: 0;
	right: 0;
	padding: 20rpx 0;
	box-shadow: -1rpx 1rpx 16rpx rgba(0, 0, 0, 0.07);
	.bottom-payment-content{
		padding: 0 24rpx;
		.payment-money-info{
			margin-bottom: 12rpx;
		}
	}
	.payment-btn{
		.bottom-pay-btn{
			width: 210rpx;
		}
	}
}
</style>